<!-- 订单信息展示
显示购物车中的商品列表
计算并展示每件商品的小计
显示订单总价
用户信息收集
收集收货人姓名、电子邮箱、联系电话和收货地址
表单字段均为必填项
表单验证
验证姓名是否填写
验证电子邮箱格式是否正确
验证电话号码是否填写
验证地址是否填写
支付流程处理
模拟支付处理（实际项目中会调用支付 API）
支付成功后清空购物车
导航回首页
用户体验优化
购物车为空时提示用户无法结算
提供返回购物车的选项
使用 alert 提示用户验证结果
技术实现细节
状态管理：使用 Pinia 的useCartStore获取全局购物车状态
表单处理：使用ref响应式数据存储表单信息
导航控制：使用useRouter实现页面间跳转
计算属性：实时计算购物车总价
条件渲染：根据购物车是否为空显示不同内容 -->
<script setup>
import { ref, computed } from 'vue';
import { useCartStore } from '../stores/cart';
import { RouterLink, useRouter } from 'vue-router';

// 获取路由实例用于页面导航
const router = useRouter();
// 获取购物车状态
const cartStore = useCartStore();

// 计算属性：获取购物车商品列表
const cartProducts = computed(() => cartStore.cartProducts);
// 计算属性：计算购物车总价
const cartTotal = computed(() => cartStore.cartTotal);

// 订单信息表单数据，创建一个响应式变量，用于存储当前商品数据
const orderSummary = ref({
  name: '',        // 收货人姓名
  email: '',       // 电子邮箱
  phone: '',       // 联系电话
  address: '',     // 收货地址
  
});

/**
 * 处理支付流程
 */
const processPayment = () => {
  // 表单验证
  if (!validateForm()) return;
  
  // 模拟支付处理（实际项目中会调用支付API）
  alert(`订单已提交！总计: ¥${cartTotal.value.toFixed(2)}`);
  
  // 清空购物车
  cartStore.clearCart();
  
  // 导航回首页
  router.push('/');
};

/**
 * 表单验证
 * @returns {boolean} 验证是否通过
 */
const validateForm = () => {
  // 验证姓名
  if (!orderSummary.value.name) {
    alert('请输入您的姓名');
    return false;
  }
  
  // 验证邮箱格式
  if (!orderSummary.value.email || !isValidEmail(orderSummary.value.email)) {
    alert('请输入有效的电子邮件地址');
    return false;
  }
  
  // 验证电话
  if (!orderSummary.value.phone) {
    alert('请输入您的电话号码');
    return false;
  }
  
  // 验证手机号格式（新增）
  if (!isValidPhone(orderSummary.value.phone)) {
    alert('请输入有效的11位手机号码');
    return false;
  }

  // 验证地址
  if (!orderSummary.value.address) {
    alert('请输入您的地址');
    return false;
  }
  
  return true;
};

/**
 * 邮箱格式验证
 * @param {string} email - 邮箱地址
 * @returns {boolean} 是否为有效邮箱
 */
const isValidEmail = (email) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
};
/**
 * 手机号格式验证（新增）
 * @param {string} phone - 手机号码
 * @returns {boolean} 是否为有效手机号
 */
const isValidPhone = (phone) => {
  const phoneRegex = /^[0-9]{11}$/;
  return phoneRegex.test(phone);
};
</script>

<template>
  <div>
    <!-- 公共头部组件 -->
    <CommonHeader />
    
    <div class="checkout-page">
      <h1>结算</h1>
      
      <!-- 购物车有商品时显示结算表单 -->
      <div v-if="cartProducts.length > 0" class="checkout-container">
        <!-- 订单摘要区域 -->
        <div class="order-summary">
          <h2>订单摘要</h2>
          
          <!-- 显示购物车中的商品 -->
          <div class="cart-item" v-for="product in cartProducts" :key="product.id">
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p>数量: {{ product.quantity }}</p>
              <p class="price">¥{{ (product.price * product.quantity).toFixed(2) }}</p>
            </div>
          </div>
          
          <!-- 显示订单总价 -->
          <div class="checkout-total">
            <span>总计:</span>
            <span>¥{{ cartTotal.toFixed(2) }}</span>
          </div>
        </div>
        
        <!-- 支付表单区域 -->
        <div class="payment-form">
          <h2>个人信息</h2>
          <form @submit.prevent="processPayment">
            <!-- 姓名输入 -->
            <div class="form-group">
              <label for="name">姓名</label>
              <input
                type="text"
                id="name"
                v-model="orderSummary.name"
                required
              />
            </div>
            
            <!-- 邮箱输入 -->
            <div class="form-group">
              <label for="email">电子邮件</label>
              <input
                type="email"
                id="email"
                v-model="orderSummary.email"
                required
              />
            </div>
            
            <!-- 电话输入 -->
            <div class="form-group">
              <label for="phone">电话号码</label>
              <input
                type="tel"
                id="phone"
                v-model="orderSummary.phone"
                required
              />

            </div>
            
            <!-- 地址输入 -->
            <div class="form-group">
              <label for="address">地址</label>
              <textarea
                id="address"
                v-model="orderSummary.address"
                rows="3"
                required
              ></textarea>
            </div>
            
            <!-- 提交订单按钮 -->
            <button type="submit" class="checkout-button">提交订单</button>
            
            <!-- 返回购物车按钮 -->
            <button type="button" class="cancel-button" @click="router.push('/cart')">返回购物车</button>
          </form>
        </div>
      </div>
      
      <!-- 购物车为空时的提示 -->
      <div v-else class="empty-cart">
        <p>购物车是空的，无法结算</p>
        <RouterLink to="/">继续购物</RouterLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.checkout-page {
  margin: 20px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.checkout-page h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.checkout-container {
  display: flex;
  gap: 30px;
}

.order-summary, .payment-form {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.order-summary h2, .payment-form h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.cart-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.product-info {
  margin-bottom: 10px;
}

.product-info h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 16px;
}

.product-info .price {
  color: #e53935;
  font-weight: bold;
}

.checkout-total {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid #eee;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
}

.checkout-total span:last-child {
  color: #e53935;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.payment-options {
  margin-bottom: 20px;
}

.payment-option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.payment-option input {
  margin-right: 10px;
}

.terms {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.terms input {
  margin-right: 10px;
}

.checkout-button, .cancel-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 10px;
}

.checkout-button {
  background-color: #42b983;
  color: white;
}

.cancel-button {
  background-color: #f0f0f0;
  color: #333;
}

.empty-cart {
  text-align: center;
  padding: 50px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.empty-cart p {
  margin-bottom: 20px;
  font-size: 18px;
  color: #666;
}

.empty-cart a {
  background-color: #42b983;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
}

@media (max-width: 768px) {
  .checkout-container {
    flex-direction: column;
  }
}
</style>